import React from 'react'
import { useParams, useMatch, useSearchParams, useLocation } from 'react-router-dom'

export default function Details() {
  /* params参数 */
  // const {id,title} = useParams()  // 方式一
  // const a = useMatch('/home/message/details/:id/:title')  // 方式二
  // console.log('a',a);


  /* Search参数： */
  // // 方式一  search：参数   setSearch：更新参数方法
  // const [search, setSearch] = useSearchParams()
  // console.log('search', search.get('id'));
  // const id = search.get('id')
  // const title = search.get('title')
  // // 方法二
  // const a = useLocation()
  // console.log(a);

  /* state参数： */
  const { state: { id, title } } = useLocation()
  return (
    <div>
      <h3>展示详情</h3>
      <ul>
        {/* <li><button onClick={() => setSearch('id=666&title=更新哦~')}>点击更新收到的search参数</button></li> */}
        <li>{id}</li>
        <li>{title}</li>
      </ul>
    </div>
  )
}
